<template>
  <div class="deleteGroup">
    <el-dialog
      :visible="visible"
      :close-on-click-modal="false"
      width="440px"
      :modal-append-to-body="false"
      :show-close="false"
    >
      <div slot="title" class="header">
        <div class="left">
          <div class="icon" />
          <div class="title">删除分组</div>
        </div>
        <div class="close_icon" @click="close" />
      </div>
      <div class="confirm_tips">请输入分组名称 <span class="bold">{{ checkData.name }}</span> 确认</div>
      <el-form ref="groupForm" v-loading="loading" :rules="rules" :model="groupForm">
        <el-form-item prop="groupName">
          <el-input
            v-model="groupForm.groupName"
            type="text"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="footer">
        <el-button class="btn cancel" plain :loading="loading" @click="close">取消</el-button>
        <el-button class="btn" type="primary" :loading="loading" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { report_group_delete } from '@/api/report'

export default {
  name: 'DeleteGroup',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    checkData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    const validateGroupName = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('内容不能为空'))
      } else {
        if (value !== this.checkData.name) {
          callback(new Error('输入的名称与当前分组名称不一致'))
        }
        callback()
      }
    }
    // 这里存放数据
    return {
      loading: false,
      groupForm: {
        groupName: ''
      },
      rules: {
        groupName: [{ validator: validateGroupName, trigger: 'blur' }]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: { },
  // 生命周期 - 创建完成（可以访问当前this实例）
  async created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 生命周期 - keep-alive
  async activated() {},
  // 方法集合
  methods: {
    submit() {
      this.$refs.groupForm.validate(async(valid) => {
        if (valid) {
          this.loading = true
          try {
            const { code } = await report_group_delete(this.checkData.id)
            if (!code) {
              this.loading = false
              this.$parent.loadData(true)
              this.close()
            }
          } catch (error) {
            console.error(error)
          } finally {
            this.loading = false
          }
        } else {
          return false
        }
      })
    },
    close() {
      this.$refs.groupForm.resetFields()
      this.$emit('close')
    }
  },
  // 进入页面前
  beforeRouteEnter(to, from, next) {
    next((vm) => {})
  },
  // 离开页面前
  beforeRouteLeave(to, from, next) {
    next()
  }
}
</script>
<style lang="scss" scoped>
.deleteGroup {
	.header{
		width: 100%;
		display: flex;
		justify-content: space-between;
    align-items: center;
    background: #FAFAFA;
		.left{
			display: flex;
			.icon{
				background: url('../../../assets/dialog/delete_icon.png');
				@include dialog_head_icons;
			}
			.title{
				font-size: 14px;
				font-family: SourceHanSansCN-Medium, SourceHanSansCN;
				font-weight: 500;
				color: #000000;
				line-height: 30px;
			}
		}
    .close_icon {
				width:25px;
        height: 24px;
				background: url('../../../assets/close-icon.png');
				background-size: 100%;
        cursor: pointer;
		}
	}
  .footer {
    text-align: center;
    .btn{
      width: 80px;
      height: 30px;
      padding: 7px 20px;
      border-radius: 5px;
    }
    .cancel {
      border: 1px solid #2C2C2C;
      &:hover{
        border: 1px solid #F96A00;
      }
    }
  }
}

.confirm_tips {
  height: 16px;
  font-size: 14px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #8C8C8C;
  line-height: 16px;
  margin-bottom: 20px;
  .bold {
    color: #2C2C2C;
    font-weight: 600;
  }
}

.waring_tips {
  height: 16px;
  font-size: 12px;
  font-family: SourceHanSansCN-Regular, SourceHanSansCN;
  font-weight: 400;
  color: #FF4D4F;
  line-height: 16px;
}

::v-deep .el-dialog__body {
    padding: 25px 30px 10px 30px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
}

::v-deep .el-input__inner{
	border-radius: 4px !important;
  padding-right: 45px !important;
}
</style>
